<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grid Test</title>
<!-- css -->
<link id="fd_theme" href="../../styles/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../styles/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{font-size: 12px}
</style>
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<div id="grid"></div>
<br />
<br />
<br />
<div id="grid2"></div>

<script type="text/javascript">
FDLib.setDir('../../src/');
var grid;
var grid2;
	     
FDLib.loadJs('FDGrid',function(){
	
	
	grid = new FDGrid({
		domId:'grid'
		//,url:'data.json'
		//,width:'200px'
		,height:'200px'
		,data:gridData
		,rowRender:function(rowData,tr,rowIndex){
			// 如果是第三行,则改变背景颜色
			// 年龄加10
			if(rowIndex + 1 == 3) {
				tr.style.backgroundColor = "#CCC";
				rowData.age = rowData.age + 10;
			}
		}
		,columns:[
			{text:"姓名",name:"username"}
			,{text:"联系地址",name:"addr",style:{'color':'blue'}}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄(靠右对齐)",name:"age",width:50,render:function(rowData,td,rowIndex){
				// 如果年龄>= 60,则背景色变红
				if(rowData.age >= 60) {
					td.style.backgroundColor = "red";
				}
				if(rowData.age <= 20) {
					td.style.color = "green";
				}
				td.align = 'right';
				return rowData.age;
			}}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del,showFun:function(rowData,rowIndex){
				// 如果是3的倍数就显示删除按钮
				return ((rowIndex+1) % 3 === 0)
			}}
		]
	});
	
	grid2 = new FDGrid({
		domId:'grid2'
		//,url:'data.json'
		//,width:'200px'
		,height:'200px'
		,data:gridData
		,showPaging:false
		,showSetting:false
		,columns:[
			{text:"姓名",name:"username"}
			,{text:"联系地址",name:"addr",style:{'color':'blue'}}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄",name:"age",width:50}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del}
		]
	});
	
});

function update(rowData,rowIndex) {
	alert(rowIndex + " update: " + rowData.username);
}
function del(rowData,rowIndex) {
	alert(rowIndex + " del: " + rowData.username);
}
</script>
</body>
</html>